import { View, Image, Textarea } from "@tarojs/components";
import { useState } from "react";
import { AtTextarea, AtIcon } from "taro-ui3";
import styles from "./index.module.scss";
interface ChatInputProps {
    onSend: (val: string) => void;
    placeholder?: string;
}

const ChatInput = (props: ChatInputProps) => {
    const { placeholder = "", onSend } = props;
    const [value, setValue] = useState("");
    const onChange = () => {
        console.log("change");
    };
    const onBlur = () => { };
    const onFocus = () => { };
    return (
        <View className={styles["chat-input-container"]}>
            <View className={styles["chat-left"]}>
                <View className={styles["chat-edit"]}>
                    <AtIcon value="edit" size="20" color="#666"></AtIcon>
                </View>
                <View className={styles["chat-input"]}>
                    <Textarea
                        className={styles["chat-textarea"]}
                        autoFocus={true}
                        maxlength={-1}
                        value={value}
                        onInput={(e) => setValue(e.detail.value)}
                        onBlur={onBlur}
                        onFocus={onFocus}
                        autoHeight={true}
                        placeholder={placeholder}
                    />
                </View>
            </View>

            <View className={styles["chat-input-btn"]}>
                <Image
                    className={styles["chat-input-img"]}
                    src={require("@/assets/images/send.png")}
                    onClick={() => onSend(value)}
                    mode={"aspectFill"}
                />
            </View>
        </View>
    );
};

export default ChatInput;
